<!--
*@Author: QWP
*@Description: 任务报表填报
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-search-header>
      <u-form
        :model="searchF"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)"
      >
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button itype="edit" @click="pushClick">
                任务填报
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-search-header>
    <u-table-content>
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :scroll="{ y: useTableScroll() }"
        @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
        @onDblclick="onDblclick"
      ></u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :keyid="keyid"
    :title="dialogTitle"
    @success="(showEdit = false), getSearch(1)"
  />

  <EditRow
    v-model:open="showEditRow"
    wrap-class-name="full-modal"
    :keyid="keyid"
    :title="dialogRowTitle"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
import { ColProps, FormItemProps, TableColumnProps } from 'ant-design-vue';
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';
import { numberC } from '@/util/common';
import { formatAmt } from '@/util/format.ts'
import { isSel } from '@/common/model/base';
import { cloneDeep } from 'lodash';
import { useTableScroll } from '@/hooks/useTable';
import { alertC } from '@/util/common';
import dayjs from 'dayjs';
import Edit from './Edit.vue';
import EditRow from './editRow.vue';
import * as dynamicReportApi from '@/service/emergency/dynamicReport';

const route = useRoute();
const router = useRouter();
let showEditRow = ref(false);
let dialogRowTitle = ref<string>('表数据');
let keyid = ref('');

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
let searchF = reactive<any>({});
const formItemProps: FormItemProps = {
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  // { label: "是否已完成数据填写", key: "sfywcsjtx", element: "select", col: { span: 4 },
  //   formItemProps: {
  //     ...formItemProps, labelWidth: '140px'
  //   },
  //   componentProps: { options: isSel() }
  // },
  // { label: "是否已完成报送", key: "sfywcbs", element: "select", col: { span: 4 },
  //   formItemProps: {
  //     ...formItemProps, labelWidth: '130px'
  //   },
  //   componentProps: { options: isSel() }
  // },
  {
    label: '任务名称',
    key: 'keywords',
    element: 'input',
    col: { span: 4 },
    formItemProps: {
      ...formItemProps,
      labelWidth: '80px',
    },
  },
];
const tabSelData = ref<any[]>([]);
// 列表
let tabData = ref([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'index',
    title: '序号',
    width: 60,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  { dataIndex: 'filename', title: '任务名称', width: 150 },
  { dataIndex: 'remark', title: '任务说明', width: 150 },
  {
    dataIndex: 'startdate',
    title: '任务开始时间',
    width: 150,
    customRender: ({ text }) => {
      return (text || '').split(' ')[0];
    },
  },
  {
    dataIndex: 'enddate',
    title: '任务结束时间',
    width: 150,
    customRender: ({ text }) => {
      return (text || '').split(' ')[0];
    },
  },
  // { dataIndex: "isFill", title: "已填写（人）", width: 80, align: "center" },
  // { dataIndex: "noFill", title: "未填写（人）", width: 80, align: "center" },
  { dataIndex: 'isFills', title: '状态', width: 150 },
  {
    dataIndex: 'createtime',
    title: '发布时间',
    width: 150,
    customRender: ({ text }) => {
      return (text || '').split(' ')[0];
    },
  },
]);

// 编辑
let dialogTitle = ref<string>('任务报表填报');
let showEdit = ref<boolean>(false);

// 导入
let showImp = ref<boolean>(false);

// 查询数据
const getSearch = async (index?) => {
  let tform = JSON.parse(JSON.stringify(searchF));
  if (index == 1) {
    pagenation.current = 1;
  }
  tform.current = pagenation.current;
  tform.size = pagenation.pageSize;
  const res = await dynamicReportApi.searchUserTask({ ...tform });
  if (res.code == 0) {
    tabData.value = res.data;
  }
};
//填报列表数据展示

const onDblclick = record => {
  keyid.value = record['keyid'];
  if (record.isFills == '未完成任务') {
    alertC('请先完成任务填报', 'warning');
    return;
  }
  showEditRow.value = true;
};

//填报列表
const pushClick = () => {
  if (tabSelData.value.length !== 1) {
    alertC('能且只能选择一条数据', 'warning');
    return;
  }
  keyid.value = tabSelData.value[0].keyid ?? '';
  showEdit.value = true;
};

onMounted(async () => {
  await getSearch(1);
});
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
